<!DOCTYPE html>
<html>
<head>
  <title>Contributors - Doocs Community</title>
  <script src="https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/npm/vue/dist/vue.js"></script>
  <script src="https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/npm/axios/dist/axios.min.js"></script>
  <script src="https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/npm/html2canvas@1.3.2/dist/html2canvas.min.js"></script>
  <link rel="stylesheet" href="https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/npm/element-ui/lib/theme-chalk/index.css">
  <script src="https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/npm/element-ui/lib/index.js"></script>
  <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
</head>
<style>
    .custom {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin: 1px 1px;
    }
</style>
<body>

  <div id="app">
    <div v-for="item in items" :key="item.id" style="display: inline-block;">
      <a :href="generateLink(item.username)" target="_blank">
        <el-tooltip class="item" effect="dark" placement="top" :content="item.username">
          <img :src="item.avatar" class="custom" @load="handleImageLoad(item)" />
        </el-tooltip>
      </a>
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        items: [],
      },
      mounted() {
        this.fetchData();
      },
      methods: {
        fetchData() {
          axios.get('contributors.json')
            .then(response => {
              this.items = response.data;
            })
            .catch(error => {
              console.error('Error fetching data:', error);
            });
        },
        generateLink(username) {
          return `https://github.com/${username}`;
        },
      }
    });
  </script>
</body>
</html>
